// Filter Bar

// Variables
//-----------------------------------

$z-index-filter-bar: 11;

// Mixins
//-----------------------------------

@mixin filter-bar-style($filter-bar-bg-color, $filter-bar-active-border-color, $filter-bar-text) {
  .item-input-wrapper {
    border-bottom: 1px solid $filter-bar-active-border-color;
    background: $filter-bar-bg-color;
    input[type="search"] {
      @include placeholder(lighten($filter-bar-text, 40%));
      color: $filter-bar-text;
    }
    .filter-bar-clear {
      &:before {
        color: $filter-bar-text;
      }
    }
  }
}

// Styles
//-----------------------------------

.filter-bar-backdrop {
  @include transition(opacity 150ms ease-in-out);
  opacity: 0;
  background-color: rgba(0,0,0,0.4);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  &.active {
    z-index: $z-index-bar-above;
    opacity: 1;
  }
}

.filter-bar {
  position: fixed;
  width: 100%;
  height: $bar-height;
  z-index: $z-index-bar-above;

  .filter-bar-wrapper {
    z-index: $z-index-filter-bar;
    position: absolute;
    top: 0;
    right:0;
    width: 100%;

    .item-input-inset {
      .icon.placeholder-icon:before {
        padding-top: 3px;
        font-size: 16px;
      }
      .item-input-wrapper {
        background: $light;
        height: 28px;
        .filter-bar-clear {
          padding: 0 2px 0 0;
          &:before {
            color: #aaa;
            font-size: 18px;
            padding-top: 1px;
          }
        }
      }
    }
  }
}

//android
.platform-android {
  .filter-bar {
    .filter-bar-light  {
      @include filter-bar-style($bar-light-bg, $bar-light-active-border, $bar-light-text);
    }
    .filter-bar-stable  {
      @include filter-bar-style($bar-stable-bg, $bar-stable-active-border, $bar-stable-text);
    }
    .filter-bar-positive  {
      @include filter-bar-style($bar-positive-bg, $bar-positive-active-border, $bar-positive-text);
    }
    .filter-bar-calm  {
      @include filter-bar-style($bar-calm-bg, $bar-calm-active-border, $bar-positive-text);
    }
    .filter-bar-assertive  {
      @include filter-bar-style($bar-assertive-bg, $bar-assertive-active-border, $bar-assertive-text);
    }
    .filter-bar-balanced  {
      @include filter-bar-style($bar-balanced-bg, $bar-balanced-active-border, $bar-balanced-text);
    }
    .filter-bar-energized  {
      @include filter-bar-style($bar-energized-bg, $bar-energized-active-border, $bar-energized-text);
    }
    .filter-bar-royal  {
      @include filter-bar-style($bar-royal-bg, $bar-royal-active-border, $bar-royal-text);
    }
    .filter-bar-dark  {
      @include filter-bar-style($bar-dark-bg, $bar-dark-active-border, $bar-dark-text);
    }
    .filter-bar-default  {
      @include filter-bar-style($bar-default-bg, $bar-default-active-border, $bar-default-text)
    };
  }

  .filter-bar-wrapper {
    .item-input-inset {
      padding-right: $button-padding * 2;
      .filter-bar-cancel {
        padding-left: 0;
        &:before {
          font-size: 24px;
        }
      }
      .item-input-wrapper {
        border-radius: 0;
        padding-left: 0;
        margin-left: 10px;
        input[type="search"] {
          font-weight: 500;
        }
        .filter-bar-clear:before {
          font-size: 20px;
        }
      }
    }
  }
}

.filter-bar-transition-horizontal {
  @include transition-transform(cubic-bezier(.25, .45, .05, 1) 300ms);
  @include translate3d(100%, 0, 0);
}

.filter-bar-transition-vertical {
  @include transition-transform(cubic-bezier(.25, .45, .05, 1) 350ms);
  @include translate3d(0, -100%, 0);
}

.filter-bar-transition-fade {
  @include transition(opacity 250ms ease-in-out) ;
  opacity: 0;
}

.filter-bar-in {
  @include translate3d(0, 0, 0);
  opacity: 1;
}
